/**
 * Created by xu on 2015/11/30.
 */
(function($){
    $.fn.initTable = function (obj) {
        var defaultOption = {
            //tableCss: "tab_ZY",//table样式
            liClass:'w10',
            url: null,//获得数据url
            columnData: null,//table中每一列的信息[{title:"第一列",name:"columnName",width:"10%",format:function(json){return json;},align:"center",click:function(json){}},{。。。。}，。。。。。]
            allData: null,//当前用户条件查询出的数据集合
            selectDataNow: true,//是否立刻查询数据


            pageCountArray: [ 10, 20, 50, 100 ],//每页显示条数
            total: 0,

            userParm: null,//保存用户当前查询条件参数
            sysParm: {"jsonBean.pageNum": 1, "jsonBean.pageCount": 10},//系统参数,如果需要分页,默认分页为第一页,分页条数为每页10条

            allowClick: true,//是否允许添加单击事件,(注:如果不需要单击事件，请将属性设置为false,减少数据循环)

            isrowClick: false,//是否是行单击(注:如果为true,columnData中的列单击将失效)
            rowClickMethod: null,//行单击事件'
            afterLoadTable:null,//table加载完成以后执行的方法
            isBindDataToTr:false,//是否将行数据绑定到tr，供加载列表后调用


            indexWidth: null,//序号列宽度
            showIndex: false,//是否显示序号

            onlyFirstPage: false,//只有一页数据

            showDataNullMsg:true,//当查询数据为空时，是否显示提示信息
            showDataNullMsgContext:'没有查询到结果!'//当查询数据为空时，显示提示信息,当showDataNullMsg为空时生效
        };
        if(typeof obj == 'object') {
            $.extend(defaultOption, obj);
            $(this).data("option", defaultOption);
            if(defaultOption.selectDataNow) {
                this.createdTable();
            }
        }
    }

    $.fn.createdTable = function () {
        var option = this.data("option");
        this.empty();//清空内容
        this.loadDataByAjax();
    }

    $.fn.loadDataByAjax = function () {
        var option = this.data("option");
        var url = null;//为了兼容一些程序设计时候用了url传参数，所以解析下url
        var urlArray = option.url.split("?");
        if(urlArray.length == 2) {
            url = urlArray[0] + "?math=" + Math.random() + "&" + urlArray[1];
        } else {
            url = option.url + "?math=" + Math.random();
        }
        var total = 0;
        var tdata = null;
        var _obj_=this;

        var nullTable_="<div class='container-fluid warp insp-container'>"+
                "<div class=\"row-fluid  bg-white1\">"+
                '<div class="l-r clearFix pad20">'+
                '<div class="left">'+
                '<div class="info-header clearFix">'+
            this.makeTabelHead()+
                '<div id="searchBody"><div class="info-tr">'+
                '<ul class="ul-header bg-white" align=\'center\'>'+
            '<img  src='+getJsPath("jquery.table.js")+'/no-data.png />' +
                '</ul>'+
                '</div></div>'+
                '</div></div></div></div></div>';
        _obj_.html(nullTable_);

        $().invoke(url, option.sysParm, function (message, json) {
            _obj_.empty();
            tdata = json.list;
            if(json.total != undefined) {//未分页时候的总数未定义
                total = json.total;
            }
            //console.log(total);
            option.total = total;
            option.allData = tdata;
            //_obj_.analysis().appendTo(_obj_);//解析数据构造table整体
            _obj_.html(_obj_.analysis());


            _obj_.setRowClass();//设置行样式


        });


    };

    $.fn.analysis = function (){
        var option = this.data("option");
        var tableData = option.allData;
        var table__="<div class='container-fluid warp insp-container'>"+
            "<div class=\"row-fluid  bg-white1\">"+
            '<div class="l-r clearFix pad20">'+
            '<div class="left">'+
            '<div class="info-header clearFix">';
        table__+=this.makeTabelHead();
        table__+='<div id="searchBody"><div class="info-tr">' ;
        if(tableData != null && tableData.length > 0) {
            for(var i in tableData) {
                var contentTr = $("<ul></ul>");

                if(option.isBindDataToTr){
                    contentTr.data("trData",tableData[i]); //将行数据绑定到tr
                }
                //alert(contentTr.data("trData")["username"])
                contentTr.addClass("ul-header bg-white");
                for(var j = 0; j < option.columnData.length; j++) {
                        var contentTd = $("<li></li>").attr({"style":("tword-break:break-all;word-wrap:break-word;text-align:" + (option.columnData[j]["align"] == undefined ? "center" : option.columnData[j]["align"])+";width:"+option.columnData[j]["width"])})
                            .html((tableData[i][option.columnData[j]["name"]] == null) || (tableData[i][option.columnData[j]["name"]] == '') ? "&nbsp;" : tableData[i][option.columnData[j]["name"]]);
                        contentTd.appendTo(contentTr);

                }
                contentTr.find("li").last().css("border-right","0px");
                //$("<li></li>")
                table__+=contentTr.get(0).outerHTML;
            }
        }else {
            table__+='<ul class="ul-header bg-white" align=\'center\'>'+
            "<img  src="+getJsPath("jquery.table.js")+"/no-data.png />" +
            '</ul>';
        }
        table__+="</div></div>"+'</div></div></div></div></div>';

        return table__;
    };


    /**构造表头th部分*/
    $.fn.makeTabelHead=function() {

        var option = this.data("option");
        var tableData = option.allData;
        var headTr = $("<ul class=\"ul-header\"></ul>");
        if(option.showIndex) {
            var headThIndex = $("<li></li>").css("width",
                (option.indexWidth == null ? "5%" : option.indexWidth))
                .html("\u5E8F\u53F7");
            headThIndex.appendTo(headTr);
        }
        for(var i in option.columnData) {
            var headThTitle = $("<li></li>")
                .css({"text-align":(option.columnData[i]["align"] == undefined ? "center" : option.columnData[i]["align"])
                    ,"width":option.columnData[i]["width"]}).html(option.columnData[i]["title"]);
            headThTitle.appendTo(headTr);
        }
        headTr.find("li").last().css("border-right","0px");
        return headTr.get(0).outerHTML;
    };

    //设置行样式
    $.fn.setRowClass = function () {
        var option = this.data("option");
        $("#"+this.get(0).id + " ul").mouseover(function () { // 如果鼠标移到class为tabStyle的表格的tr上时，执行函数
            $(this).addClass("ulOver");
        }).mouseout(function () { // 给这行添加class值为over，并且当鼠标一出该行时执行函数
            $(this).removeClass("ulOver");
        }); // 移除该行的class
        $("#"+this.get(0).id + " ul:odd").addClass("alt"); // 给class为tabStyle的表格的偶数行添加class值为alt
    };

})(jQuery)